<template>
  <div :class="`market-info ${type}`">
    <div class="title">
      <span>{{ title }}</span>
    </div>
    <div class="content">
      <div class="line">
        <div class="item" v-for="{ header, body, type: dataType, isRedGreen } in todayData" :key="body">
          <span class="header">{{ header }}</span>
          <span class="body" v-fontresize v-if="isRedGreen" v-redGreen="body">{{
            dealData(body, dataType) | judgeIsNull
          }}</span>
          <span class="body" v-fontresize v-else>{{ dealData(body, dataType) | judgeIsNull }}</span>
        </div>
      </div>
      <div class="line sub">
        <div class="item" v-for="{ header, body, type: dataType, green } in lastDayData" :key="body">
          <span class="header">{{ header }}</span>
          <span :class="{ body: true, green }" v-fontresize>{{ dealData(body, dataType) | judgeIsNull }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatNumber } from '@/scripts/tools.js';
export default {
  props: {
    type: {
      type: 'rose' | 'drop',
      default: 'rose',
    },
    title: {
      type: String,
      default: '',
    },
    todayData: {
      type: Array,
      default: () => [],
    },
    lastDayData: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    dealData(value, dataType) {
      return formatNumber(+value, dataType);
    },
  },
};
</script>
<style lang="less" scoped>
.rose {
  .title {
    background-image: var(--bg-img-1);
    font-size: 28px;
    color: #ff2436;
    line-height: 36px;
    font-weight: 500;

    span {
      color: var(--text-3);
    }
  }

  .content .body {
    color: var(--text-3);
  }
}

.drop {
  .title {
    background-image: var(--bg-img-2);

    span {
      color: var(--text-4);
    }
  }

  .content .body {
    color: var(--text-4);
  }
}

.market-info {
  width: 280px;
  height: 296px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0.02rem 8px 0 rgba(0, 0, 0, 0.06);
  margin-right: 16px;
  flex-shrink: 0;

  .title {
    .bg-mixins;
    width: 100%;
    height: 76px;
    display: flex;
    justify-content: center;
    align-items: center;

    span {
      font-family: PingFangSC-Medium;
      font-size: 28px;
      letter-spacing: 0;
      text-align: center;
      line-height: 36px;
      font-weight: 500;
    }
  }

  .content {
    background: var(--bg-color-1);
    width: 100%;
    height: 220px;
    padding: 0 6px 12px;
    box-sizing: border-box;

    .line {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 50%;

      .item {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .header {
          font-family: PingFangSC-Medium;
          font-size: 24px;
          color: rgba(0, 0, 0, 0.84);
          text-align: center;
          line-height: 40px;
          font-weight: 500;
        }

        .body {
          width: 100%;
          font-family: THS-Bold;
          font-size: 36px;
          letter-spacing: 0;
          text-align: center;
          line-height: 44px;
          font-weight: 700;
        }
        .green {
          color: #07ab4b !important;
        }
      }

      &.sub {
        .item {
          .header {
            color: var(--text-2);
          }

          .body {
            color: var(--text-1);
          }
        }
      }
    }
  }
}
</style>
